<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>提货卡管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/data-statistics' }"
        >数据统计</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="data-page">
      <div class="data-device">
        <div class="item bg1">
          <div class="item-left">
            <img src="/src/assets/system/提货卡设备.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right_bottom">设备总数</div>
            <div class="item-right_top">69</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">在线数量</div>
            <div class="item-right_top">59</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">离线数量</div>
            <div class="item-right_top">3</div>
          </div>
        </div>
        <div class="item bg2">
          <div class="item-left">
            <img src="/src/assets/system/提货卡.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right_bottom">绑定提货卡总数</div>
            <div class="item-right_top">879</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">启用数量</div>
            <div class="item-right_top">679</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">暂停数量</div>
            <div class="item-right_top">19</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">完结数量</div>
            <div class="item-right_top">203</div>
          </div>
        </div>
        <div class="item bg3">
          <div class="item-left">
            <img src="/src/assets/system/提货数.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right_bottom">定货总数</div>
            <div class="item-right_top">10000</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">已提货数量</div>
            <div class="item-right_top">6000</div>
          </div>
          <div class="item-right">
            <div class="item-right_bottom">待提货数量</div>
            <div class="item-right_top">4000</div>
          </div>
        </div>
      </div>
      <div class="situation-box">
        <div class="businessSituation">
          <div class="table">经营情况</div>
          <div class="all-num">
            <div class="box">
              <div>总交易额</div>
              <div>￥69000000.000</div>
            </div>
            <div class="table-item">
              <div class="table-item_left">
                <div class="left-top">平均提货量</div>
                <div class="left-down">535</div>
              </div>
              <div class="table-item_right">
                <div class="right-top">平均交易额</div>
                <div class="left-down">100000</div>
              </div>
            </div>
          </div>
          <div class="table-item" style="margin-top: 30px">
            <div class="table-item_left">
              <div class="left-top">昨日提货量</div>
              <div class="left-down">900</div>
            </div>
            <div class="table-item_right">
              <div class="right-top">今日提货量</div>
              <div class="left-down">900</div>
            </div>
          </div>
          <div class="table-item">
            <div class="table-item_left">
              <div class="left-top">昨日交易数</div>
              <div class="left-down">￥1200.00</div>
            </div>
            <div class="table-item_right">
              <div class="right-top">今日交易额</div>
              <div class="left-down">￥1200.00</div>
            </div>
          </div>
          <div class="table-item">
            <div class="table-item_left">
              <div class="left-top">昨日平均提货量</div>
              <div class="left-down">10</div>
            </div>
            <div class="table-item_right">
              <div class="right-top">今日平均提货量</div>
              <div class="left-down">9</div>
            </div>
          </div>
          <div class="table-item">
            <div class="table-item_left">
              <div class="left-top">昨日平均交易量</div>
              <div class="left-down">￥108.00</div>
            </div>
            <div class="table-item_right">
              <div class="right-top">今日平均交易额</div>
              <div class="left-down">￥108.00</div>
            </div>
          </div>

          <div class="salesRanking">
            <div class="table">
              <div>产品销量排行</div>
            </div>
            <el-table :data="tableData">
              <el-table-column label="排名">
                <template #default="scope">
                  <div class="img-style">
                    {{ scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="commodity" label="设备名称" />
              <el-table-column prop="salesVolume" label="提货量" />
              <el-table-column prop="grossProfit" label="交易额" />
            </el-table>
          </div>
        </div>
        <div class="analysis">
          <div>
            <div class="table">
              <div>经营分析</div>
              <div>
                <el-button
                  type="primary"
                  style="
                    background-color: #16499c;
                    border-color: #16499c;
                    margin-right: 10px;
                  "
                  >导出数据</el-button
                >
                <el-date-picker
                  style="width: 220px"
                  v-model="value1"
                  type="datetimerange"
                  format="YYYY-MM-DD"
                  start-placeholder="请选择"
                  end-placeholder="请选择"
                />
              </div>
            </div>
            <div id="main" style="width: 100%; height: 240px"></div>
          </div>
          <div class="charts-grops">
            <div style="width: 50%; height: 380px; position: relative">
              <span>年同比提货量（笔）</span>
              <div id="echarts-bar" style="width: 100%; height: 300px"></div>
            </div>
            <div style="width: 50%; height: 380px; position: relative">
              <span>年同比交易额（万）</span>
              <div id="echarts3" style="width: 100%; height: 300px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, nextTick } from "vue";
const value1 = ref("");

const tableData = [
  {
    index: "1",
    commodity: "商品",
    salesVolume: "销量",
    grossProfit: "毛利",
    grossProfitMargin: "毛利率",
  },
  {
    index: "2",
    commodity: "商品",
    salesVolume: "销量",
    grossProfit: "毛利",
    grossProfitMargin: "毛利率",
  },
  {
    index: "3",
    commodity: "商品",
    salesVolume: "销量",
    grossProfit: "毛利",
    grossProfitMargin: "毛利率",
  },
];
const initEcharts3 = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("echarts3"));

  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      type: "value",
    },
    legend: {
      data: ["2023年", "2024年"],
	  right: '20%',
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    series: [
      {
        name: "2023年",
        type: "line",
        stack: "Total",
        itemStyle: {
          color: "#94d8f3",
        },
        data: [
          220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310,
        ],
        smooth: true,
        
      },
      {
        name: "2024年",
        type: "line",
        stack: "Total",
        itemStyle: {
          color: "#ff9223",
        },
        data: [
          120, 132, 101, 134, 90, 100, 210, 120, 132, 101, 134, 90, 230, 210,
        ],
        smooth: true,
        label: {
          normal: {
            show: true, // 显示标签
            position: "top", // 在柱子顶部显示
            color: "#ff9223", // 例如，黑色
            // 修改文本大小
            fontSize: 10, //
            formatter: function (param) {
              // 这里可以自定义显示的内容，param.value 是系列数据的当前项
              return param.value;
            },
          },
        },
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};
const initEcharts2 = () => {
  var myChart = echarts.init(document.getElementById("echarts-bar"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      //   transitionDuration: 0,
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },

    legend: {
      data: ["2023年", "2024年"],
	  right: '20%',
    },
    color: ["#00c8ff", "#ff9223"],
    toolbox: {
      show: false,
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
    ],
    axisLabel: {
      margin: 105, // 数字表示标签与轴线之间的距离
    },
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
        },
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
    ],
    series: [
      {
        name: "2023年",
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [
          320, 332, 301, 334, 390, 320, 332, 301, 320, 332, 301, 334, 390, 320,
          332, 301,
        ],
        label: {
          normal: {
            show: true, // 显示标签
            position: "top", // 在柱子顶部显示
            color: "#00c8ff", // 例如，黑色
            // 修改文本大小
            fontSize: 10, //
            formatter: function (param) {
              // 这里可以自定义显示的内容，param.value 是系列数据的当前项
              return param.value;
            },
          },
        },
      },
      {
        name: "2024年",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [
          150, 232, 201, 154, 190, 182, 191, 234, 150, 232, 201, 154, 190, 182,
          191, 234,
        ],
        label: {
          normal: {
            show: true, // 显示标签
            position: "top", // 在柱子顶部显示
            color: "#ff9223", // 例如，黑色
            // 修改文本大小
            fontSize: 10, //
            formatter: function (param) {
              // 这里可以自定义显示的内容，param.value 是系列数据的当前项
              return param.value;
            },
          },
        },
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};
nextTick(() => {
  initEcharts3();
  initEcharts2();
});
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));

  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ["01号", "05号", "10号", "15号", "20号", "25号", "30号"],
    },
    yAxis: {
      type: "value",
    },
    legend: {
      data: ["交易额", "订单数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    series: [
      {
        name: "订单数",
        type: "line",
        stack: "Total",
        itemStyle: {
          color: "#94d8f3",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "交易额",
        type: "line",
        stack: "Total",
        itemStyle: {
          color: "#ff9223",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
});
</script>
<style lang="scss" scoped>
:deep() {
  .cell {
    text-align: center;
  }
}
</style>
<style lang="scss">
.data-page th {
  background-color: #ffffff !important;
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: center !important;
}
</style>
<style scoped lang="scss">
.data-page {
  background-color: #fff;
  margin-top: 20px;
  .table {
    height: 40px;
    background-color: #6d6d6d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;

    .el-button {
      font-size: 12px;
      padding: 0 10px;
      height: 25px;
      line-height: 25px;
      border-radius: 5px;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 5px 0;
  }

  .data-device {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bg1 {
      background: #faaf3b;
    }

    .bg2 {
      background: #0071bb;
    }

    .bg3 {
      background: #ec4766;
    }
    .item {
      width: 33%;
      position: relative;
      display: flex;
      align-items: center;
      padding: 20px 20px;
      border-radius: 15px;
      height: 100px;

      .item-left {
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
      }

      .item-right {
        margin-left: 10px;
        color: #fff;
        width: 30%;

        .item-right_top {
          font-size: 16px;
          font-weight: 900;
          text-align: center;
          margin-top: 10px;
        }

        .item-right_bottom {
          font-size: 11px;
          margin-top: 2px;
          text-align: center;
        }
      }
    }
  }
  .salesRanking {
    background-color: #f0f0f0;
    margin-top: 20px;

    .img-style {
      background-image: url("/src/assets/home/strategy2.png");
      background-size: cover;
      /* 使图片适应整个屏幕 */
      background-position: center;
      /* 居中显示 */
      background-repeat: no-repeat;
      /* 不重复平铺 */
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
    }
  }

  .situation-box {
    display: flex;
    align-items: start;
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 6px 0;

    .analysis {
      width: 77%;
      background-color: #e5e5e5;
      > div:first-child {
        background-color: #fff;
      }
    }

    .businessSituation {
      width: 22%;
      background-color: #fff;

      .table-item {
        display: flex;
        height: 50px;
        padding: 5px 0;
        background-color: #0fffff;
        margin-top: 10px;

        .table-item_left {
          width: 50%;
          text-align: center;

          .left-top {
            font-size: 14px;
            color: #979797;
          }

          .left-down {
            font-size: 16px;
            color: #333;
            font-weight: 600;
          }
        }

        .table-item_right {
          width: 50%;
          text-align: center;

          .right-top {
            font-size: 14px;
            color: #ccc;
          }

          .left-down {
            font-size: 16px;
            color: #333;
            font-weight: 600;
          }
        }
      }
      .all-num {
        height: 200px;
        .box {
          height: 120px;
          padding-top: 30px;
          text-align: center;
          //   background-color: #faaf3b;
          > div:first-child {
            font-size: 18px;
            color: #979797;
          }
          > div:last-child {
            font-size: 22px;
            color: #f05924;
            font-weight: 600px;
            margin-top: 10px;
          }
        }
        .table-item {
          background-color: #faaf3b;
          padding: 20px 0px;
          height: 80px;
          .left-top {
            color: #fff !important;
          }
          .left-down {
            color: #fff !important;
          }
          .right-top {
            color: #fff !important;
          }
          .left-down {
            color: #fff !important;
          }
        }
      }
    }
  }
}
.charts-grops {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 40px;
  background-color: #fff;
  span {
    position: absolute;
    top: 0px;
    left: 110px;
	font-weight: 600;
  }
}
#echarts-bar {
  width: 100% !important;
  height: 86% !important;
}
// #echarts9 {
//   width: 100% !important;
//   height: 100% !important;
// }
</style>
